iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
1
Modern Web

PHP入門系列 第 30

Day30-PHP & Ajax & JavaScript

  • 分享至 

  • xImage
  •  

為JavaScript與Ajax結合php應用,記得引入JavaScript<script type="text/javascript">

html:

    name:
    <input type="text" id="name">
    <p>
    password:
    <input type="text" id="password">
    <input type="button" value="login" onclick="post();">
    </form>
    <div id="result"></div>

為html表單的基本介面。設定點擊按鈕後,執行onclickpost()的function,<div></div>為按下按鈕後所產生字樣所預留的位置。

JavaScript:

<script type="text/javascript">
    function post(){
       $.post('test.php',{name:$('#name').val(),password:$('#password').val()},
           function(data){
               $('#result').html(data);
           }); 
    }
</script>

自行命名post()的function,用POST方式。

  • 此處的取值.val();為jQuery取值方式,因此需要引入jQuery!
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

php:

<?php
    $name = $_POST['name'];
    $password = $_POST['password'];
    echo "hi";
?>

輸入欄位後,出現hi字樣。

輸出:
https://ithelp.ithome.com.tw/upload/images/20191016/20120962136jeFWAns.png

希望這些資料對 PHP網頁初學者會有幫助!加油 : )

參考資料:https://www.youtube.com/watch?v=jVAaxkbmCts


上一篇
Day29-PHP & Ajax & jQuery
系列文
PHP入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-22 07:46:36

恭喜完賽

我要留言

立即登入留言